<template>
    <div class="body">
            <div class="user-head-bg">
         <div class="user-head"> <i class="iconfont icon-accountfilling"></i></div>
        </div>
         <div class="user-name" @click="valuemessage=='登录/注册'?denglu():''">{{ valuemessage }}</div>


         <deng-lu class="denglu" @truehiddenvalue="truehiddenvalue" :ishidden="ishiddenvalue" @truehidden="truehidden"></deng-lu>
    </div>

</template>


<style lang="scss" scoped>
    
.body{
   
    width: 100%;
    height: 17vh;
    background:linear-gradient(to right,rgb(228, 198, 138),rgb(216, 234, 137));
    display: flex;
  
    justify-content: start;
    align-items: center;
    .user-head-bg{
        margin-left: 10px;
     border: 1px solid black;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     text-align: center;
     line-height: 40px;
     background-color: white;
        .user-head{
        
        font-size: 16px;
    }
    }
   
    .user-name{
        margin-left: 10px;
        color: rgb(155, 146, 146);
    }
  .denglu{
    position: absolute;
  text-align: center;
    top: 150px;
   
  }
}

</style>

<script>

import DengLu from './DengLu.vue';
export default {
    data(){
       return{
        ishiddenvalue:true,
        valuemessage:'登录/注册'
       }
    },
components:{
    DengLu

},
methods:{
    denglu(){
        this.ishiddenvalue=false
    },
    truehidden(){
        this.ishiddenvalue=true
    },
    truehiddenvalue(value){
        this.ishiddenvalue=true
        this.valuemessage=value
    }
}

}


</script>